/*
 * @Copyright (c) 2021 NetEase, Inc.  All rights reserved.
 * Use of this source code is governed by a MIT license that can be found in the LICENSE file
 */
// @import '~antd/dist/antd.less';
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100% !important;
}
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; outline: none;}
table { border-collapse:collapse; border-spacing:0; }
.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.tooltip, .popover{
  color: #fff;
  width: fit-content;
  outline: none;
}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
}

#root{
  width: 100%;
  height: 100%;
}

.layout-outer{
  width: 100%;
  height: 100%;
}
.layout-header, .layout-footer, .layout-content, .layout-sider {
  background: rgba(0, 0, 0, 0)!important;
  position: relative;
}

.modal {
  p {
    margin: 0;
  }
  .title {
    color: #222222;
    font-size: 18px;
    text-align: center;
    font-weight: 500;
    margin-bottom: 16px;
  }
  .desc {
    color: #333333;
    font-size: 14px;
    text-align: center;
  }
  .ant-modal-content {
    width: 360px;
    // height: 181px;
    background: #FFFFFF;
    box-shadow: 0px 10px 40px rgba(23, 23, 26, 0.2);
    border-radius: 8px;
  }
  .ant-modal-close {
    display: none;
  }
  .ant-modal-footer {
    display: flex;
    justify-content: space-around;
    padding: 0;
  }
  .ant-modal-body {
    padding: 24px 50px;
    // height: 129px;
  }
  .ant-btn {
    border: none;
    box-shadow: none;
    color: #333333;
    font-size: 15px;
    width: 180px;
    height: 45px;
    margin-top: 2px;
    &:hover,
    &:active,
    &:focus {
      background: #FFFFFF;
      border-color: #EDEEF0;
      color: #333333;
    }
  }
  .ant-btn-primary {
    background: none;
    color: #337EFF;
    font-size: 15px;
    width: 180px;
    height: 45px;
    border-left: 1px solid#EDEEF0;
    &:hover,
    &:active,
    &:focus {
      background: #FFFFFF;
      border-color: none;
      color: #337EFF;
    }
  }
}

.reject-modal {
  p {
    margin: 0;
  }
  .title {
    color: #222222;
    font-size: 18px;
    text-align: center;
    font-weight: 500;
    margin-bottom: 16px;
  }
  .desc {
    color: #333333;
    font-size: 14px;
    text-align: center;
  }
  .ant-modal-content {
    width: 308px;
    // height: 115px;
    background: #FFFFFF;
    box-shadow: 0px 10px 40px rgba(23, 23, 26, 0.2);
    border-radius: 8px;
  }
  .ant-modal-close {
    display: none;
  }
}

.handsModal {
  .ant-modal-content {
    width: 514px;
    height: 344px;
    background: #232C37;
    border-radius: 4px;
  }
  .ant-modal-header {
    height: 50px;
    border-bottom: 1px solid #343D49;
    background: #232C37;
  }
  .ant-modal-title {
    color: #FFFFFF;
    font-size: 16px;
    text-align: center;
  }
  .ant-modal-close {
    height: 50px;
    top: -2px;
    left: 3px;
  }
  .anticon {
    color: #66748A;
    font-size: 14px;
  }
  .ant-modal-body {
    margin: 10px 24px 70px 24px;
    padding: 0;
    width: 466px;
    height: 214px;
    ul {
      margin-bottom: 0;
      color: #FFFFFF;
      font-size: 14px;
      height: 272px;
      overflow-x: hidden;
      overflow-y: auto;
    }
    li {
      height: 58px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(52, 61, 73, 1);
      &.all-member{
        display: inline-flex;
        border: none;
        margin: 0 5px 0 0;
      }
      div {
        width: 162px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        button {
          background: #2D3845;
          border-radius: 2px;
          width: 76px;
          height: 28px;
          border: none;
          color: #FFFFFF;
        }
      }
    }
  }
}

.memberModal {
  .ant-modal-content {
    width: 515px;
    height: 439px;
    background: #232C37;
    border-radius: 4px;
  }
  .ant-modal-header {
    height: 54px;
    border-bottom: 1px solid #343D49;
    background: #232C37;
  }
  .ant-modal-title {
    color: #FFFFFF;
    font-size: 16px;
    text-align: center;
  }
  .ant-modal-close {
    height: 50px;
    width: 50px;
    top: -2px;
    left: 3px;
  }
  .anticon {
    color: #66748A;
    font-size: 14px;
  }
  .ant-modal-body {
    margin: 13px 24px 123px 25px;
    padding: 0;
    width: 466px;
    height: 196px;
    position: relative;
    ul {
      margin-bottom: 0;
      color: #FFFFFF;
      font-size: 14px;
      height: 288px;
      overflow-y: auto;
      overflow-x: hidden;
    }
    li {
      height: 53px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(52, 61, 73, 1);
      position: relative;
      img {
        width: 14px;
        display: inline-block;
        // margin-left: -6px;
        padding-bottom: 2px;
        margin-right: 5px;
      }
      span.nick-name{
        display: inline-block;
        width: 50px;
        text-overflow: ellipsis;
        overflow-x: hidden;
        white-space: nowrap;
      }
      .buttons {
        width: 238px;
        display: flex;
        // justify-content: space-between;
        align-items: center;
        margin-left: 16px;
        // button {
        //   background: #2D3845;
        //   border-radius: 2px;
        //   width: 113px;
        //   height: 29px;
        //   border: none;
        //   color: #B4BFD0;
        //   font-size: 12px;
        // }
      }
      .icons {
        position: absolute;
        right: 0;
        .more {
          color: #89909C;
        }
      }
    }
  }
  .ant-popover-inner {
    background: #333B45;
    border-radius: 4px;
  }
  .ant-modal-footer {
    height: 52px;
    border-top: 1px solid #343D49;
    padding: 0;
  }
  .ant-tabs {
    width: 210px;
    margin: -16px auto;
    color: #fff;
    font-size: 16px;
    .ant-tabs-nav {
      height: 55px;
      .ant-tabs-nav-operations {
        display: none;
      }
    }
  }
  .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #fff;
  }
  .ant-tabs-tab, .ant-tabs-tab:hover {
    color: #4A5665;
  }
  .ant-tabs-tab + .ant-tabs-tab {
    margin: 0 0 0 18px;
    color: #4A5665;
  }
  .ant-tabs-ink-bar {
    background: #fff;
  }
  .ant-tabs-top > .ant-tabs-nav::before {
    border-bottom: none;
  }
}

.chatModal {
  .ant-modal-content {
    width: 620px;
    height: 560px;
    background: #232C37;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
  }
  .ant-modal-header {
    height: 48px;
    border-bottom: 1px solid #343D49;
    background: #232C37;
  }
  .ant-modal-title {
    color: #FFFFFF;
    font-size: 18px;
    text-align: center;
  }
  .ant-modal-close {
    height: 50px;
    top: -2px;
    left: 3px;
  }
  .anticon {
    color: #66748A;
    font-size: 14px;
  }
  .ant-modal-body {
    padding: 16px 12px 12px 16px;
    // height: 331px;
    flex: 1;
  }
  .ant-modal-footer {
    height: 92px;
    border-top: 1px solid #343D49;
  }
}

.room-loading{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255,.5);
  z-index: 100;
  .room-loading-spin{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
// cover for wbsdk .ant-layout *{box-sizing: border-box}
.tool-collection .tc-container {
  box-sizing: content-box;
}